<template>
    <div class="cate-box">
        <div class="cate-top">
            <van-search v-model="value" placeholder="搜索商品，共239款好物" shape="round" @click="$router.push('/search')" />
        </div>
        <div class="bottom">
            <div class="slider">
                <van-sidebar v-model="index" @change="slideBarChangeHandler">
                    <van-sidebar-item v-for="item in catelist " :title="item.name" />
                </van-sidebar>
            </div>
            <div class="content">
                <div class="img-box">
                    <img :src="catelistitem.banner_url" alt="">
                </div>
                <p class="title-box">
                    <span class="title-box-top">
                        {{ catelistitem.name }}好物
                    </span>
                    <span class="title-box-bottom"></span>
                </p>
                <van-grid :column-num="3">
                    <van-grid-item v-for="item in catelistitem.subList" :key="item.id">
                        <van-image style="width: 70px; height: 70px;" :src="item.wap_banner_url"
                            @click="$router.push({ name: 'catelistcate', query: { id: item.id } })" />
                        <p>{{ item.name }}</p>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getcategoryListApi, getcategoodsApi } from '@/api/cate'
// 定义一个变量，表示搜索框的输入的值
const value = ref<string>('')
// 侧边栏
const index = ref<number>(0)
const catelist = ref<CateNs.IcategoryList[]>([])
const catelistitem = ref<CateNs.IcategoodsData>({
    id: '',
    name: '',
    subList: [],
    wap_banner_url: '',
    banner_url: ''
})
// 方法请求侧边栏数据
const getCateList = async (id: number) => {
    const res = await getcategoryListApi()
    catelist.value = res.categoryList
    // console.log(res.categoryList);
    const info = await getcategoodsApi(id.toString())
    catelistitem.value = info.data.currentOne

}
// 导航条改变事件
const slideBarChangeHandler = (index: number) => {

    // 拿到当前分类
    getCateList(catelist.value[index].id)
}
onMounted(async () => {
    const res = await getcategoryListApi()
    catelist.value = res.categoryList

    slideBarChangeHandler(0)
})
</script>

<style  lang="scss">
.cate-box {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow: hidden;
    background-color: #f3f3f3;

    .cate-top {
        width: 100%;
        height: 54px;
        position: relative;
        z-index: 2;
        overflow-x: hidden;
    }

    .van-search {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .bottom {
        height: 100%;
        width: 100%;
        display: flex;


        .slider {
            height: 100%;
            width: 80px;
            text-align: center;
            background-color: #fff;
        }

        .content {
            flex: 1;
            padding-left: 2px;

            .img-box {
                width: 273px;
                height: 125px;
                margin: 10px auto;

                img {

                    width: 100%;
                    height: 100%;
                }
            }

            .title-box {
                margin-top: 20px;
                width: 100%;
                overflow: hidden;

                .title-box-top {
                    width: 100%;
                    display: block;
                    text-align: center;
                    float: left;
                    font-size: 18px;
                    color: #2e2d2d;
                }

                .title-box-bottom {
                    display: block;
                    width: 70px;
                    height: 10px;
                    background-color: rgb(206, 166, 42);
                    margin: auto;
                    margin-top: 13px;

                }
            }

            .van-grid-item__content {
                background: #f3f3f3;
            }
        }

        .van-sidebar-item {
            background-color: #fff;
        }
    }

}
</style>